<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <div class="Navigation">
            <van-nav-bar title="咨询询问" left-arrow @click-left="onClickLeft" />
        </div>

        <div>
            <div class="koa"></div>
            <div class="div">
                <van-search style="width: 76%;height: 35px;float: left;" v-model="val" placeholder="请输入需要发送的内容" />
                <van-button style="float: left;height: 35px;" @click="fa" type="primary">发送消息</van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const onClickLeft = () => history.back();
import { ref } from "vue";
const val = ref("");
let ws = new WebSocket("http://localhost:8090");
const fa = () => {
    ws.send(val.value);
    let p = document.createElement("DIV");
    p.innerHTML = `
    <p style='margin: 0 40px;
    padding: 10px 40px;
    border: 1px solid #00f;border-radius: 15px;'>${val.value}</p>
    <img
      src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
      alt=""
      style="width: 50px;height: 50px;"
    />`
    p.style.display = 'flex'
    p.style.margin = '10px 0'
    p.style.width = '90vw'
    p.style.justifyContent = 'flex-end';

    const koaElement = document.querySelector(".koa");
    if (koaElement) {
        koaElement.appendChild(p);
    } else {
        console.error("找不到.koa 元素");
    }
};
ws.onmessage = (e) => {
    setTimeout(() => {
        let p = document.createElement("DIV");
        p.innerHTML = `
  <img
      src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      alt=""
      style="width: 50px;height: 50px;"
    />
    <p style='margin: 0 40px;
    padding: 10px 40px;
    border: 1px solid red;border-radius: 15px;'>${e.data}</p>
    `
        p.style.display = 'flex'
        p.style.width = '90vw'
        p.style.justifyContent = 'flex-start';
        console.log(p)
        const koaElement = document.querySelector(".koa");
        if (koaElement) {
            koaElement.appendChild(p);
        } else {
            console.error("找不到.koa 元素");
        }
    }, 300)
}
</script>

<style scoped lang="scss">
.Navigation {
    border-bottom: solid 5px #ccc;
}

.koa {
    width: 100vw;
    height: 80vh;
    margin-bottom: 5px;
}

.div {
    width: 100vw;
    height: 10vh;
}

.dv {
    display: flex;
    width: 100vw;
    align-items: center;

    .img {
        width: 50px;
        height: 50px;
    }

    .p {
        margin: 0 40px;
        border: 1px solid red;
        border-radius: 15px;
    }
}
</style>